<!-- #layout name=blank -->
<style>
    .menu-link {
        text-decoration: none;
        border-bottom: 1px dashed;
    }
    
    .menu-link:hover {
        text-decoration: none;
    }
</style>
<div class="page-header">
    <h1 data-bind="text: Kooboo.text.common.Menu + ': '+ name()" class="title"></h1>
</div>
<div data-bind="component: { name: 'kb-breadcrumb', params: [{
    name: 'SITES'
},{
    name: 'DASHBOARD'
},{
    name: Kooboo.text.common.Menus,
    url: Kooboo.Route.Menu.ListPage
},{
    name: name()
}] }"></div>
<div id="container">
    <table class="table tree table-hover">
        <thead>
            <tr>
                <th>Display text</th>
                <th>Link</th>
                <th class="table-action"></th>
                <th class="table-action"></th>
                <th class="table-action"></th>
                <th class="table-action"></th>
                <th class="table-action"></th>
                <th class="table-action"></th>
            </tr>
        </thead>
        <tbody data-bind="foreach: { data: menuItems, afterRender: afterMenusRendered }">
            <tr data-bind="css: $parent.className($data)">
                <td>
                    <!-- ko if: $parent.isNotRoot($data) -->
                    <a data-bind="text: $data.name(), attr: { 'data-url': $data.UpdateText, 'data-inline-edit': 'true', 'data-id': $data.id()}" href="javascript:;"></a>
                    <!-- /ko -->
                    <!-- ko ifnot: $parent.isNotRoot($data) -->
                    <span data-bind="text: $data.name()"></span>
                    <!-- /ko -->
                </td>
                <td>
                    <a data-bind="visible: $parent.isNotRoot($data) && !$data.urlEditing(), text: $data.url(), click: $parent.onEditLink" href="javascript:;" class="menu-link"></a>
                    <div data-bind="visible: $data.urlEditing()" class="col-md-8 row">
                        <div class="col-md-8">
                            <input data-bind="textInput: $data.url, typeahead: $parent.pageList, items: 20, defaultShow: true" type="text" class="form-control" placeholder="Select value from below or type a new url">
                        </div>
                        <a data-bind="click: $parent.updateLinkUrl" class="btn btn-primary btn-sm" title="Save"><i class="fa fa-check"></i></a>
                        <a data-bind="click: $parent.cancelEditLink" class="btn btn-default btn-sm" title="Cancel"><i class="fa fa-close"></i></a>
                    </div>
                </td>
                <td>
                    <a data-bind="visible: $parent.isNotRoot($data) && $parent.isMultiLangeMenu, tooltip: Kooboo.text.tooltip.menu.multilingual, tooltipPlacement: 'left', click: $parent.onShowMultiModal" href="javascript" class="btn btn-xs btn-default"><i class="fa fa-language"></i></a>
                </td>
                <td>
                    <a data-bind="click: $parent.onShowTemplate, tooltip: Kooboo.text.tooltip.menu.editTemplate" href="javascript:;" class="btn btn-xs btn-default"><i class="fa fa-code"></i></a>
                </td>
                <td>
                    <a class="btn btn-xs btn-default" href="javascript:;" data-bind="click: $parent.onAddSubMenu.bind($data), tooltip: Kooboo.text.tooltip.menu.addSubMenu"><i class="fa fa-plus"></i></a>
                    <!-- <div class="btn-group">
                        <a class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown" data-bind="css: { 'disabled': $data.addMenu() }"><i class="fa fa-plus"></i></a>
                        <ul class="dropdown-menu pull-right">
                            <li>
                                <a href="javascript:;" data-toggle="popover" data-placement="left" data-trigger="hover" title="Add link" data-content="Add link allows you to do ......" data-bind="click: $parent.onAddSubMenu.bind($data)">Add link</a>
                            </li>
                            <li>
                                <a href="javascript:;" data-toggle="popover" data-placement="left" data-trigger="hover" title="Add data source" data-content="Add data source allows you to do ........" data-bind="click: $parent.onAddDataSourceMneu.bind($data)">Add data source</a>
                            </li>
                        </ul>
                    </div> -->
                </td>
                <td>
                    <a data-bind="click: $parent.onRemoveSubMenu.bind($data), visible: $parent.isNotRoot($data), tooltip: Kooboo.text.common.remove" class="btn btn-xs btn-default"><i class="fa fa-minus"></i></a>
                </td>
                <td>
                    <a data-bind="visible: $parent.isNotRoot($data), click: $parent.menuMoveUp.bind($data), attr: { disabled: $index() == 1 }, css: { disabled: $index() == 1 }, tooltip: Kooboo.text.tooltip.moveUp" href="javascript:;" class="btn btn-xs btn-default"><i class="fa fa-caret-up"></i></a>
                </td>
                <td>
                    <a data-bind="visible: $parent.isNotRoot($data), click: $parent.menuMoveDown.bind($data), attr: { disabled: $index() == $parent.menuItems().length -1 }, css: { disabled: $index() == $parent.menuItems().length -1 }, tooltip: Kooboo.text.tooltip.moveDown, tooltipPlacement: 'left'"
                        href="javascript:;" class="btn btn-xs btn-default"><i class="fa fa-caret-down"></i></a>
                </td>
            </tr>
            <tr data-bind="visible: $data.addMenu()">
                <td>
                    <div data-bind="css: { 'has-error': $data.subNameRequired }" class="col-md-8">
                        <input data-bind="value: $data.newSubName" type="text" class="form-control" placeholder="Sub menu's name" />
                    </div>
                </td>
                <td>
                    <div class="col-md-8">
                        <input data-bind="value: $data.newSubUrl, valueUpdate:'keyup', typeahead: $parent.pageList, items: 20, defaultShow: true" type="text" class="form-control row" placeholder="Select value from below or type a new url">
                    </div>
                </td>
                <td></td>
                <td></td>
                <td colspan="2" class="table-action">
                    <a data-bind="click: $parent.onSaveSubMenu" href="javascript:;" class="btn btn-sm blue">Save</a>
                </td>
                <td colspan="2" class="table-action">
                    <a data-bind="click: $parent.onCancelSubMenu.bind(this, $data)" href="javascript:;" class="btn btn-sm btn-default">Cancel</a>
                </td>
            </tr>
        </tbody>
        <tfoot data-bind="visible: loading">
            <tr>
                <td colspan="100" class="text-center">
                    <i class="fa fa-spinner fa-spin"></i>
                    <!-- ko text: Kooboo.text.common.loading -->
                    <!-- /ko -->
                </td>
            </tr>
        </tfoot>
    </table>

    <div data-bind="modal: templateModal" id="template_modal" class="modal fade" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button data-bind="click: onHideTemplateModal" class="close"><i class="fa fa-close"></i></button>
                    <h4 class="modal-title">Template</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label">Preview</label>
                                <div class="border-gray">
                                    <textarea data-bind="codeMirror:{
                                        mode: 'htmlmixed',
                                        value: templatePreview,
                                        height: '460px',
                                        readOnly: true
                                    }"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div data-bind="visible: !menuWithNoChild()" class="form-group">
                                <label class="control-label">Sub item container</label>
                                <div class="border-gray">
                                    <textarea data-bind="codeMirror:{
                                        mode: 'htmlmixed',
                                        value: subItemContainer,
                                        height: '80px'
                                    }"></textarea>
                                </div>
                                <div class="btn-group margin-top-10" data-bind="foreach: codeHelperSubItem">
                                    <a class="btn btn-xs btn-default" data-bind="text:$data.text, value:$data.value, click:$parent.codeHelp" href="#"></a>
                                </div>
                            </div>
                            <div data-bind="visible: !menuWithNoChild()" class="form-group">
                                <label class="control-label">Sub item template</label>
                                <div class="border-gray">
                                    <textarea data-bind="codeMirror:{
                                        mode: 'htmlmixed',
                                        value: subItemTemplate,
                                        height: '80px'
                                    }"></textarea>
                                </div>
                                <div class="btn-group margin-top-10" data-bind="foreach: subTmplCodeHelpers">
                                    <a class="btn btn-xs btn-default" data-bind="text:$data.text, value:$data.value, click:$parent.codeHelp" href="#"></a>
                                </div>
                            </div>
                            <div data-bind="visible: showCurrentTemplate" class="form-group">
                                <label class="control-label">Current template</label>
                                <div class="border-gray">
                                    <textarea data-bind="codeMirror:{
                                        mode: 'htmlmixed',
                                        value: currentTemplate,
                                        height: '80px'
                                    }"></textarea>
                                </div>
                                <div class="btn-group margin-top-10" data-bind="foreach: tmplCodeHelpers">
                                    <a class="btn btn-xs btn-default" data-bind="text:$data.text, value:$data.value, click:$parent.codeHelp" href="#"></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button data-bind="click: onSaveTemplate" class="btn green">Save</button>
                    <button data-bind="click: onHideTemplateModal" class="btn gray">Cancel</button>
                </div>
            </div>
        </div>
    </div>

    <div data-bind="modal: multilingualModal" class="modal fade" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button data-bind="click: onHideMultilinModal" class="close"><i class="fa fa-close"></i></button>
                    <h4 class="modal-title">Multilingual</h4>
                </div>
                <div class="modal-body">
                    <div class="form-horizontal">
                        <!-- ko foreach: multiNames -->
                        <div class="form-group">
                            <label data-bind="text: $data.key" class="control-label col-md-3"></label>
                            <div class="col-md-9">
                                <!-- ko if: $data.verifyField -->
                                <input data-bind="value: $data.value, error: $data.value" type="text" class="form-control">
                                <!-- /ko -->
                                <!-- ko ifnot : $data.verifyField -->
                                <input data-bind="value: $data.value" type="text" class="form-control">
                                <!-- /ko -->
                            </div>
                        </div>
                        <!-- /ko -->
                    </div>
                </div>
                <div class="modal-footer">
                    <button data-bind="click: onSaveMultiName" class="btn green">Save</button>
                    <button data-bind="click: onHideMultilinModal" class="btn gray">Cancel</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    (function() {
        Kooboo.loadJS([
            "/_Admin/Scripts/kooboo/Guid.js",
            "/_Admin/Scripts/lib/bootstrap3-typeahead.min.js",
            "/_Admin/Scripts/./lib/codemirror/lib/codemirror.js",
            "/_Admin/Scripts/kobindings.typeahead.js",
            "/_Admin/Scripts/./lib/codemirror/mode/htmlmixed/htmlmixed.js",
            "/_Admin/Scripts/components/kbBreadcrumb.js",
            "/_Admin/Scripts/lib/treegrid/jquery.treegrid.min.js",
            "/_Admin/Scripts/./lib/js-beautify/lib/beautify-html.js",
            "/_Admin/Scripts/./lib/codemirror/mode/xml/xml.js",
            "/_Admin/Scripts/./lib/codemirror/mode/javascript/javascript.js",
            "/_Admin/Scripts/./lib/codemirror/mode/css/css.js",
            "/_Admin/Scripts/lib/x-editable/bootstrap-editable.min.js",
            "/_Admin/Scripts/kobindings.codemirror.js"
        ]);
        Kooboo.loadCSS([
            "/_Admin/Scripts/lib/codemirror/lib/codemirror.css",
            "/_Admin/Styles/bootstrap-editable/css/bootstrap-editable.css"
        ])
    })()
</script>
<script src="/_Admin/View/Development/Menu.js"></script>